<template>
  <div>
    <el-select v-model="subject" placeholder="请选择科目" style="margin-top:3%">
      <el-option
        v-for="item in subjects"
        :key="item.subject"
        :label="item.label"
        :value="item.subject"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="grade"
      placeholder="请选择年级"
      style="margin-left:1%;margin-top:3%"
    >
      <el-option
        v-for="item in grades"
        :key="item.grade"
        :label="item.label"
        :value="item.grade"
      >
      </el-option>
    </el-select>

    <el-select
      v-model="titleType"
      placeholder="请选择题目类型"
      style="margin-left:1%;margin-top:3%"
    >
      <el-option
        v-for="item in titleTypes"
        :key="item.titleType"
        :label="item.label"
        :value="item.titleType"
      >
      </el-option>
    </el-select>

    <el-select
      v-model="range"
      placeholder="请选择题目范围"
      style="margin-left:1%;margin-top:2%"
    >
      <el-option
        v-for="item in ranges"
        :key="item.range"
        :label="item.label"
        :value="item.range"
      >
      </el-option>
    </el-select>

    <el-button type="primary" plain @click="brushTopic">开始刷题</el-button>

    <!-- 华丽的分割线 -->
    <!-- 华丽的分割线 -->
    <!-- 华丽的分割线 -->
    <!-- 华丽的分割线 -->
    <!-- 华丽的分割线 -->
    <el-divider></el-divider>

    <div v-if="textdisplay">
      <h3 style="margin-left:13%;margin-top:5%;width:800px">
        在无数个刷题到深夜的夜晚，你要告诉自己，为了自己能够走向更好的远方，
        为了见自己想见的人，为了做自己想做的事情，更为了成为那个更好的自己，好好努力。
      </h3>
      <h3 style="margin-left:13%;margin-top:5%;width:800px">
        In countless brush into the night night, you have to tell yourself, in
        order to go to a better distance, in order to see the people you want to
        do what you want to do, more to become the better yourself, work hard.
      </h3>
    </div>

    <!-- 如果用户做选择题 -->
    <div v-if="selectChoose">
      <template>
        <h3 style="margin-left:20%;margin-top:5%;width:700px">
          {{ title }}
        </h3>
        <el-checkbox-group
          v-model="checkList"
          style="margin-left:23%;margin-top:3%"
        >
          <el-checkbox label="A"
            ><h3>{{ a_option }}</h3> </el-checkbox
          ><br />
          <el-checkbox label="B"
            ><h3>{{ b_option }}</h3> </el-checkbox
          ><br />
          <el-checkbox label="C">
            <h3>{{ c_option }}</h3></el-checkbox
          ><br />
          <el-checkbox label="D"
            ><h3>{{ d_option }}</h3></el-checkbox
          >
        </el-checkbox-group>
      </template>
    </div>

    <div style="margin-top:5%" v-if="buttondisplay">
      <el-button
        type="primary"
        plain
        style="margin-left:15%"
        @click="endOfDoTitle"
        >结束刷题</el-button
      >
      <el-button
        type="primary"
        plain
        style="margin-left:28%"
        @click="nextTitle()"
        >下一题</el-button
      >
    </div>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../assets/commons";
export default {
  data() {
    return {
      //接收后台传过来的题目
      AllTitle: [],
      //用于存放这道选择题选择的答案
      checkList: [],
      //题目的下标
      titleIndex: 0,
      //题目的数量
      titleSize: 0,
      //做完的题目的id
      titleids: "",
      //当前状态
      state: true,
      //错了的题目的id
      errortitleids: "",
      //刚进来的文字是否显示
      textdisplay: true,
      //是否选择了做选择题
      selectChoose: false,
      //按钮是否显示
      buttondisplay: false,
      //题目
      title: "",
      //答案
      answer: "",
      //a选项
      a_option: "",
      //b选项
      b_option: "",
      //c选项
      c_option: "",
      //d选项
      d_option: "",
      allClassify: {},
      subjects: [
        {
          subject: "语文",
          label: "语文"
        },
        {
          subject: "数学",
          label: "数学"
        },
        {
          subject: "英语",
          label: "英语"
        },
        {
          subject: "政治",
          label: "政治"
        },
        {
          subject: "历史",
          label: "历史"
        },
        {
          subject: "地理",
          label: "地理"
        },
        {
          subject: "物理",
          label: "物理"
        },
        {
          subject: "化学",
          label: "化学"
        },
        {
          subject: "生物",
          label: "生物"
        }
      ],
      subject: "",
      grades: [
        {
          grade: "1",
          label: "高一上"
        },
        {
          grade: "2",
          label: "高一下"
        },
        {
          grade: "3",
          label: "高二上"
        },
        {
          grade: "4",
          label: "高二下"
        },
        {
          grade: "5",
          label: "高三上"
        },
        {
          grade: "6",
          label: "高三下"
        }
      ],
      grade: "",
      titleTypes: [
        {
          titleType: "1",
          label: "选择题"
        },
        {
          titleType: "2",
          label: "填空题"
        },
        {
          titleType: "3",
          label: "解答题"
        }
      ],
      titleType: "",
      ranges: [
        {
          range: "1",
          label: "全部"
        },
        {
          range: "2",
          label: "只刷错题"
        },
        {
          range: "3",
          label: "只刷未做过的题目"
        }
      ],
      range: ""
    };
  },

  methods: {
    //结束刷题
    endOfDoTitle() {
      //结束刷题后显示文字
      this.textdisplay = true;
      //将题目去掉
      this.selectChoose = false;
      //将按钮去掉
      this.buttondisplay = false;
      this.resetvalue();
      axios
        .post(commons.baseUrl + "student/endOfDoTitle", this.allClassify, {
          headers: { "Content-Type": "application/JSON" }
        })
        .then(res => {
          console.log(res);
        });
    },
    //题目做完点击下一题弹出来的,//右边的弹出框
    open(str) {
      this.$notify({
        title: str,
        message:
          "您的答案" +
          this.checkList.sort().join("") +
          ",正确答案" +
          this.answer,
        offset: 100
      });
    },
    //渲染题目
    loadingTitle(type) {
      if (type == 1) {
        let i = this.titleIndex;
        this.title = this.AllTitle[i].title;
        this.a_option = "A: " + this.AllTitle[i].a_option;
        this.b_option = "B:" + this.AllTitle[i].b_option;
        this.c_option = "C:" + this.AllTitle[i].c_option;
        this.d_option = "D:" + this.AllTitle[i].d_option;
        this.answer = this.AllTitle[i].answer;
      }
    },
    nextTitle() {
      if (this.titleIndex + 1 >= this.titleSize) {
        alert("已经是最后一题了");
        this.state = false;
      }
      if (this.titleType == 1) {
        //排序
        this.checkList.sort();
        if (this.checkList.join("") == this.answer) {
          let str = "回答正确,即将进入下一题";
          //右边的弹出框
          this.open(str);
          if (this.state == false) {
            return;
          } else {
            this.Timeout();
          }
        } else {
          //添加到错题里面
          this.errortitleids =
            this.AllTitle[this.titleIndex].id + "," + this.errortitleids;
          let str = "回答错误,即将进入下一题";
          //右边的弹出框
          this.open(str);
          if (this.state == false) {
            return;
          } else {
            this.Timeout();
          }
        }
      }
    },
    //定时任务
    Timeout() {
      setTimeout(() => {
        //将题目的id添加到已完成的id里面
        this.titleids = this.AllTitle[this.titleIndex].id + "," + this.titleids;
        //重新赋值为空
        if (this.titleType == 1) {
          this.checkList = [];
        }
        this.titleIndex = this.titleIndex + 1;
        this.loadingTitle(this.titleType);
      }, 1500);
    },
    brushTopic() {
      if (this.subject == "") {
        alert("请选择科目");
        return;
      }
      if (this.grade == "") {
        alert("请选择年级");
        return;
      }
      if (this.titleType == "") {
        alert("请选择题目类型");
        return;
      }
      if (this.range == "") {
        alert("请选择题目范围");
        return;
      }
      //这个方法是给返回去的属性赋值
      this.resetvalue();
      axios
        .post(commons.baseUrl + "student/brushTopic", this.allClassify, {
          headers: { "Content-Type": "application/JSON" }
        })
        .then(res => {
          console.log(res);
          //下标赋值为0
          this.titleIndex = 0;
          //状态改为true
          this.state = true;
          //题目id赋值为空
          this.titleids = "";
          //错了的题目的id
          this.errortitleids = "";
          //接收后台传过来的题目
          (this.AllTitle = []),
            //用于存放这道选择题选择的答案
            (this.checkList = []);

          //如果用户想做选择题
          if (this.titleType == 1) {
            this.AllTitle = res.data.listCT;
            this.titleSize = res.data.listCT.length;
            this.textdisplay = false;
            this.selectChoose = true;
            this.buttondisplay = true;
            this.loadingTitle(1);
          }
        });
    },
    //这个方法是给返回去的属性赋值
    resetvalue() {
      this.allClassify.subject = this.subject;
      this.allClassify.grade = this.grade;
      this.allClassify.titleType = this.titleType;
      this.allClassify.range = this.range;
      this.allClassify.u_id = this.$store.state.userid;
      //去除最后一个逗号
      if (this.titleids != "") {
        this.titleids = this.titleids.substring(0, this.titleids.length - 1);
      }
      if (this.errortitleids != "") {
        this.errortitleids = this.errortitleids.substring(
          0,
          this.errortitleids.length - 1
        );
      }
      this.allClassify.titleids = this.titleids;
      this.allClassify.errortitleids = this.errortitleids;
    }
  },

  //路由导航守卫
  //导航离开该组件时调用
  beforeRouteLeave(to, from, next) {
    console.log("离开了");
    this.endOfDoTitle();
    next();
  },
  //生命周期方法,页面初始化好后使用
  mounted() {}
};
</script>
<style scoped></style>
